import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { saveID, savePath } from '@/reduxToolkit/reducers/detail'
import { Image } from 'antd-mobile'
import style from './index.module.scss'
import { itemTtype } from './type'

import HeaderView from '@/components/Header/index'
import LoadingView from '@/components/Loading/index'
import Lists from '@/components/List'

const Collect = () => {
  const [flag, setFlag] = useState(true)
  const [loadingCode] = useState(1)     
  const navigate = useNavigate()
  const dispatch: any = useDispatch()

  // 跳转商品详情页
  const tz = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
    dispatch(savePath('collect'))
  }
  
  // 收藏列表
  const getContent = () => {
    return <Lists page='collect' setLoadingFlag={setLoadingFlag} getlist={(goodlist: []) => {
        return goodlist.map((item: itemTtype) => {
          return (
            <div className={style.itemBox} onClick={() => tz(item.goods.id)} key={item.goods.id}>
               <Image src={item.goods.cover_url}/>
               <p className={style.title}>{item.goods.title}</p>
               <p className={style.description}><span className={style.price}>￥{item.goods.price}</span></p>
            </div>
          )
        })
    }}></Lists>
  }

  // 隐藏loading 子组件调用
  const setLoadingFlag = () => {
    setFlag(false)
  }

  return (
    <>
      {/* 头部信息 */}
      <HeaderView title='个人中心' backIcon={true} backPath='mine'></HeaderView>

      {/* 收藏列表  */}
      <div className={style.content}>
        {getContent()}
      </div> 

      {/* 加载中或者加载超时 */}
      {flag && <LoadingView loadingCode={loadingCode}></LoadingView>}
    </>
  )
}

export default Collect